<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // (1) Entry（入口）
    //         Entry 指定 Webpack 打包的起点文件，通常是 index.js 或 main.js，Webpack 从这里开始解析整个项目的依赖关系。
        
    //     module.exports = {
    //         entry: './src/index.js'
    //     };
    //     Webpack 会从 src/index.js 开始解析代码，并找到所有依赖模块进行打包。

    // (2) Output（输出）
    //     Output 决定 Webpack 打包后生成的文件位置和文件名。
    //     module.exports = {
    //         entry: './src/index.js',
    //         output: {
    //             filename: 'bundle.js',    // 生成的文件名
    //             path: __dirname + '/dist' // 输出的目录
    //         }
    //     };
    //     这里 Webpack 会把最终打包的文件输出到 dist/bundle.js。

    // (3) Loaders（加载器）
    //         Webpack 只能理解 JavaScript 和 JSON 文件，
    //         Loaders 用于处理其他类型的文件（如 CSS、图片、TypeScript 等），并将它们转换为 Webpack 能识别的模块。
    //         module.exports = {
    //             module: {
    //                 rules: [
    //                     {
    //                         test: /\.css$/,  // 处理 .css 文件
    //                         use: ['style-loader', 'css-loader']
    //                     }
    //                 ]
    //             }
    //         };
    // (4) Plugins（插件）
    //     Plugins 用于扩展 Webpack 功能，例如压缩代码、拷贝文件、生成 HTML 文件等。
    //     const HtmlWebpackPlugin = require('html-webpack-plugin');
    //     module.exports = {
    //         plugins: [
    //             new HtmlWebpackPlugin({
    //                 template: './src/index.html'  // 生成 HTML 文件
    //             })
    //         ]
    //     };
    //     生成 HTML	html-webpack-plugin
    //     清理输出文件夹	clean-webpack-plugin 用于在每次构建时清理 output 目录（通常是 dist 目录），避免生成的旧文件残留，确保打包目录始终是干净的。
    //     提取 CSS	mini-css-extract-plugin 用于将 CSS 从 JavaScript 中提取成独立的 CSS 文件，而不是将 CSS 直接内联在 style 标签里（style-loader 的方式）
    //     代码压缩	terser-webpack-plugin
    //     复制文件	copy-webpack-plugin
    
    // (5) mode（模式）
    //     Webpack 通过 mode 选项来指定当前是开发模式还是生产模式。
    //     module.exports = {
    //         mode: 'development' // 'production' 或 'none'
    //     };

    //     development	代码不压缩，提供 Source Map，利于调试
    //     production	代码压缩优化，提升性能
    //     none	不做任何优化

    // (6) DevServer（开发服务器）
    //     Webpack DevServer 提供本地服务器，支持热更新（HMR），可以在修改代码后实时更新浏览器。
    //     module.exports = {
    //         devServer: {
    //             contentBase: './dist', // 告诉 DevServer 从 dist/ 提供静态文件
    //             hot: true,  // 开启热更新
    //             port: 3000  // 运行端口
    //         }
    //     };
    // (7)Code Splitting（代码分割）
    //     Webpack 代码分割可以减少首屏加载时间，提高应用性能。

    //     📌 动态导入
    //     import('./math.js').then(module => {
    //         console.log(module.default(2, 3)); 
    //     });
    //     只有执行到 import() 时，Webpack 才会加载 math.js。

    //     📌 多 entry 代码分割
    //     module.exports = {
    //         entry: {
    //             app: './src/app.js',
    //             admin: './src/admin.js'
    //         },
    //         output: {
    //             filename: '[name].bundle.js'
    //         }
    //     };
    //     Webpack 会生成 app.bundle.js 和 admin.bundle.js 两个文件，分别加载。
    // (8)Tree Shaking（去除无用代码）
    //     Tree Shaking 是 Webpack 通过 ES6 模块 (import/export) 删除未使用的代码，优化打包体积。

    // (9) Source Map（调试映射）
    //     Source Map 用于调试代码，可以将打包后的代码映射回原始代码。
    //     module.exports = {
    //         devtool: 'source-map'
    //     };
    //     source-map：完整映射，调试友好，但体积大。
    //     cheap-module-source-map：性能较好，适合开发环境。
</script>
</html>